import React from "react";
import { Card, Avatar, Tag } from "antd";
import styles from "./index.module.less";

interface ProcessStep {
  type: "start" | "process" | "end";
  title: string;
  status: "success" | "error" | "warning";
  user?: string;
  time?: string;
  result?: string;
}

const Pg6: React.FC = () => {
  const processSteps: ProcessStep[] = [
    {
      type: "start",
      title: "开始",
      status: "success",
    },
    {
      type: "process",
      title: "发起流程",
      user: "谢沁沐/80231866",
      time: "2025-03-31 15:55:06",
      result: "请审批",
      status: "success",
    },
    {
      type: "process",
      title: "室经理审批",
      user: "谢沁沐/80231866",
      time: "2025-03-31 15:55:38",
      result: "同意",
      status: "success",
    },
    {
      type: "process",
      title: "开发团队主管与项目管理员审批",
      user: "柏洋/80273863",
      time: "2025-03-31 15:56:23",
      result: "同意",
      status: "success",
    },
    {
      type: "end",
      title: "结束",
      status: "success",
    },
  ];

  return (
    <div className={styles.container} data-oid="0:jzdub">
      <div className={styles.left} data-oid="tzwj7ok">
        <div className={styles.process} data-oid="xvo.d0v">
          <h3 data-oid="kl27rsp">审批进程</h3>
          {processSteps.map((step, index) => (
            <div key={index} className={styles.processItem} data-oid="nktu36j">
              {step.type === "process" ? (
                <>
                  <Avatar src="user-icon.png" data-oid="dly1qx8" />
                  <div className={styles.processInfo} data-oid="p.nmn7:">
                    <div data-oid="rfqxatj">{step.title}</div>
                    <div data-oid="9b-vhvy">{step.user}</div>
                    <div data-oid="y2vv1bf">处理时间：{step.time}</div>
                    <div data-oid="2arkhk8">
                      <Tag color="success" data-oid="ag_z7l0">
                        【已处理】
                      </Tag>
                      处理结果：{step.result}
                    </div>
                  </div>
                </>
              ) : (
                <div className={styles.processDot} data-oid="44448-y">
                  <span
                    className={`${styles.dot} ${styles[step.status]}`}
                    data-oid="suadd-q"
                  />

                  {step.title}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
      <div className={styles.right} data-oid="3byb6n.">
        <Card className={styles.card} data-oid="wrkagj6">
          <div className={styles.section} data-oid="faip4mn">
            <h3 data-oid="ejo66h.">基本信息</h3>
            <div className={styles.infoItem} data-oid="q8fyh_r">
              <span data-oid="_-trrnq">项目编号:</span>
              <span data-oid="kjfj47m">T25AC311</span>
            </div>
            <div className={styles.infoItem} data-oid="5cushr6">
              <span data-oid="2sc8hcd">变更分类:</span>
              <span data-oid="2-61tmb">技术原因</span>
            </div>
            <div className={styles.infoItem} data-oid="x9vetkn">
              <span data-oid="a1jp2l_">取消原因说明:</span>
              <span data-oid="qq02c.:">12</span>
            </div>
          </div>

          <div className={styles.section} data-oid="pep2eur">
            <h3 data-oid="s2392gg">审批意见</h3>
            <div className={styles.infoItem} data-oid="7ji6i3h">
              <span data-oid="c-cefdj">同意</span>
            </div>
          </div>

          <div className={styles.section} data-oid="97q-pgp">
            <div className={styles.infoRow} data-oid="-sxevf-">
              <div className={styles.infoItem} data-oid="7ax933h">
                <span data-oid="cv8wb.k">项目名称:</span>
                <span data-oid="yu:6w4g">一些特性B</span>
              </div>
              <div className={styles.infoItem} data-oid="53ggugg">
                <span data-oid="ys51w_x">变更原因:</span>
                <span data-oid="_ka6atu">变更分类及变更原因</span>
              </div>
            </div>
            <div className={styles.infoItem} data-oid="70r:.4:">
              <span data-oid="5fpivwv">技术外联单位影响</span>
            </div>
          </div>

          <div className={styles.section} data-oid="_dley4f">
            <h3 data-oid="l5:eebo">附件</h3>
            <div className={styles.infoItem} data-oid="5.hq-ky">
              <span data-oid="9-hjazr">暂无附件</span>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Pg6;
